<template>
  <div id="car">
    <div class="header2" ref="header">
      <div class="goback" @click="handleCancle"><i class="icon icon-left"></i></div>
      <div class="title">车辆需求</div>
      <div class="actions"></div>
    </div>
    <div ref="contents" style="overflow-y: auto;-webkit-overflow-scrolling: touch;">
      <div class="itembox">
        <checker-box-children
          v-model="subData"
          name="车型需求"
          @on-del="handleDelGoods"
          :model-data="data"
          @show-children="setChildrenData"
          @add-data="handleAddParent"
          @on-del-data="handleDelParent"
          @clear-children="showChildren = false"
          tagType="6"
          :maxLength="1"
          :serverid="serverid"
          :is-add-action="false"
        ></checker-box-children>
      </div>

      <div class="itembox" v-show="showChildren">
        <checker-box-children
          v-model="childrenSubData"
          :model-data="childrenData"
          name="车长需求"
          @on-del="handleDelGoods"
          @add-data="handleAddChildren"
          @on-del-data="handleDelChildren"
          tag-type="6"
          tag-value-type="10"
          :tid="tid"
          :maxLength="1"
          :serverid="serverid"
          :is-add-action="false"
        ></checker-box-children>
      </div>

      <div style="padding: 0.2rem;">
        <p class="noticemsg" v-if="type == 'tongchengkuaiche'">
          额外需求说明：<br />
          装卸、上楼费请在司机接单后与司机议价；<br />
          一键呼叫增加费用和额外费用，在待取货订单中在线支付更有保障。
        </p>
      </div>
    </div>
    <div class="fiexd-btn vux-1px-t" ref="btn">
      <div class="flex-auto">
        <x-button type="primary" action-type="button" @click.native="handleSub">确认</x-button>
      </div>
    </div>


  </div>
</template>

<script>
  import CheckerBoxChildren from "../public/CheckerBoxChildren"
  export default{
    name: 'car',
    components: {
      CheckerBoxChildren
    },
    computed: {
      globalServerID() {
        return this.$store.state.serverID
      },
      cityCode() {
        return this.$store.state.cityCode
      }
    },
    watch: {
      globalServerID: function (val) {
        if(val != this.serverid) {
          this.inits()
        }
      },
      load: function (val) {
        if(val){
          this.getData()
        }
      }
    },
    props: ['type', 'checkType', 'name', 'serverid', 'load'],
    created() {
      this.getData()
    },
    data() {
      return {
        showChildren: true,
        data: [],
        childrenData: [],
        tid: '',
        subData: {
          id: [],
          name: [],
          value: [],
          type: []
        },
        childrenSubData: {
          id: [],
          name: [],
          value: [],
          type: []
        }
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const headerHeight = this.$refs['header'].offsetHeight
      const btnHeight = this.$refs['btn'].offsetHeight
      const pensonHeight = bodyHeight - headerHeight - btnHeight
      this.$refs['contents'].style.height = pensonHeight + 'px'
    },
    methods: {
      getData() {
        this.$http.post($config.host + '/api/tags/car', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          city: this.$store.state.userInfo.city_code,
          service_id: this.serverid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token
        })).then(res => {
          const {code ,msg, data} = res.data
          if(code == 1 && data) {
            //针对整车将车型强制为多选,无敌了
            if(this.serverid == 8) {
              data.data.map(item => {
                  item.radio = 2
              })
            }
            this.data = data.data
            this.tid = data.data[0].id
            this.childrenData = data.data[0].value
          }
        })
      },
      handleAddParent(item) {
        this.data.push(item)
      },
      setChildrenData(id) {
        this.showChildren = true
        const index = this.data.findIndex(pet => pet.id == id)
        this.childrenData = this.data[index].value
        this.tid = id
      },
      handleDelParent(id, isChecked) {
        const index = this.data.findIndex(pet => pet.id == id)
        this.data.splice(index, 1)
        if(isChecked) {
          this.childrenData = []
        }
      },
      handleDelChildren(id) {
        const index = this.childrenData.findIndex(pet => pet.id == id)
        this.childrenData.splice(index, 1)
      },
      handleAddChildren(item) {
        this.childrenData.push(item)
      },
      handleCancle() {
        this.$emit('on-cancle')
      },
      handleSub() {
//        if(!this.subData.id.length) {
//          this.$vux.toast.text('请选择车型', 'middle')
//          return false
//        }
//        if(!this.childrenSubData.id.length) {
//          this.$vux.toast.text('请选择车长', 'middle')
//          return false
//        }
        this.$emit('on-submit', this.subData, this.childrenSubData)
      },
      handleDelGoods() {
        this.$emit('on-clear', this.subData, this.childrenSubData)
      },
      inits() {
        this.showChildren = true
        this.data = []
        this.childrenData = []
      }
    }
  }
</script>
<style scoped>
  .fiexd-btn{
    height: 1.1rem;
    background: #f3f4f5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:88;
    padding: 0.1rem 0.2rem;
  }
</style>
